<script setup>
import { ref, computed } from 'vue'
import { addCourseList, getCourseDetails, editCourseList } from '@/api/course.js'
const emit = defineEmits([''])
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})
const form = ref({
  subjectName: null, //课程学科
  courseName: null, //课程名称
  fetAmount: null, //适应人群
  price: null, //课程价格
  courseIntro: null
})
const titleText = computed(() => {
  return form.value.id ? '编辑课程' : '添加课程'
})
//数字框
const num = ref(null)
const numChange = (value) => {
  num.value = value
}
//关闭回调
const close = () => {
  emit('update:showDialog', false)
}
//确认
const btnOK = async () => {
  if (form.value.id) {
    await editCourseList(form.value)
  } else {
    await addCourseList(form.value)
  }
  form.value = {
    subjectName: null, //课程学科
    courseName: null, //课程名称
    fetAmount: null, //适应人群
    price: null, //课程价格
    courseIntro: null
  }
  emit('addSuccess')
  close()
}
//修改回显方法
const getCourseDetailsApi = async (id) => {
  const {data} = await getCourseDetails(id)
  form.value = data
}
//暴露方法
defineExpose({
  getCourseDetailsApi
})
</script>
<template>
  <el-dialog :title="titleText" v-model="props.showDialog" @close="close" width="600">
    <div class="dialogBox">
      <el-form label-position="top">
        <el-row>
          <el-col :span="12">
            <el-form-item label="课程学科">
              <el-select
                placeholder="请选择"
                size="large"
                style="width: 245px"
                v-model="form.subjectName"
              >
                <el-option label="Java" value="Java"></el-option>
                <el-option label="前端" value="前端"></el-option>
                <el-option label="人工智能" value="人工智能"></el-option>
                <el-option label="大数据" value="大数据"></el-option>
                <el-option label="Python" value="Python"></el-option>
                <el-option label="测试" value="测试"></el-option>
                <el-option label="新媒体" value="新媒体"></el-option>
                <el-option label="产品经理" value="产品经理"></el-option>
                <el-option label="UI设计" value="UI设计"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程名称">
              <el-input
                placeholder="请输入"
                size="large"
                style="width: 245px"
                v-model="form.courseName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适应人群">
              <el-select
                placeholder="请选择"
                size="large"
                style="width: 245px"
                v-model="form.fetAmount"
              >
                <el-option label="小白学员" value="小白学员"></el-option>
                <el-option label="中级程序员" value="中级程序员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程价格">
              <el-input-number
                v-model="form.price"
                :min="1"
                placeholder="请输入"
                controls-position="right"
                size="large"
                @change="numChange"
                style="width: 245px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课程介绍">
              <el-input
                v-model="form.courseIntro"
                placeholder="请输入"
                type="textarea"
                size="large"
                style="width: 515px"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button round size="large" style="width: 100px" @click="close()">取消</el-button>
        <el-button type="success" round size="large" style="width: 100px" @click="btnOK"
          >确认</el-button
        >
      </el-row>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
::deep(.el-dialog__header) {
  border-bottom: 1px solid solid;
}
.dialogBox {
  padding: 10px 10px 0;
}
:deep(.el-input__wrapper) {
  border-radius: 10px;
  background-color: #f9f9f9;
}
</style>
